<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h5>vm.$set Vue.set</h5>
        <p>user:{{ user }}</p>
        <input type="button" value="添加新属性age" @click="addUserAge()"><br>
        <!-- 
            v-model绑定的对象中的属性，在初始化时如果没有定义
            程序运行时，触发该变量的修改会自行完成数据劫持操作
        -->
        <input type="text" v-model="user.phone">
        <input type="text" :value="user.phone" @input="user.phone = $event.target.value">
        <input type="text" :value="user.phone" @input="setUserPhone($event.target.value)">
        <h5>vm.$delete Vue.delete</h5>
        <p>stu:{{ stu }}</p>
        <input type="text" :value="stu.name" @input="stu.name = $event.target.value">
        <input type="text" :value="stu.age" @input="stu.age = $event.target.value">
        <br><br>
        <input type="button" value="删除劫持数据" @click="deleteStuProp()">

        <h5>vm.$nextTick Vue.nextTick</h5>
        <h5>vm.$forceUpdate</h5>
        <input type="button" value="强行渲染" @click="updateVueView()">
    </div>
</body>
<script>
    /*
    - Vue中对部分特殊的属性和功能方法进行特殊指代定义，用于提供独立的执行和获取方式
    - Vue的实例属性和方法以统一规范以 $ 开头
    - 相关实例属性和方法 
        - vm.$el：描述当前Vue实例使用的根 DOM 元素。
        - vm.$data：描述当前Vue实例观察的数据对象。
        - vm.$options：构建当前 Vue 实例的初始化选项。 -> 将内置配置和开发者配置进行整合转换后的配置项
        - vm.$refs：返回一个对象，记录当前Vue实例模板中，定义了ref属性的所有 DOM 元素。

        - vm.$watch：构建一个对Vue实例中数据仓库中变量（data，computed）的监控方法
        - vm.$set：等同于 Vue.set ，手动为实例中没有数据监听的变量添加监视功能
            !!! 只能为data中已经存在的 对象进行新属性添加，不能直接为 data仓库添加新属性
        - vm.$delete：等同于 Vue.delete ，手动为实例中的变量删除监视功能
            !!! 只能为data中已经存在的 对象进行属性删除，不能直接为 data仓库进行操作
        - vm.$forceUpdate()：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
        
        - vm.$nextTick：等同于 Vue.nextTick ，将执行函数体延迟到页面DOM更新完成后执行

        - vm.$mount：手动挂在Vue实例
        - vm.$destroy：手动销毁Vue实例
    */
    let vm = new Vue({
        el:"#app",
        data:{
            user:{
                name:"tom",
            },
            stu:{
                name:"jack",
                age:23
            }
        },
        methods: {
            addUserAge(){
                // this.user.age = 23;
                // this.$set(targetObj,propName,propValue);
                //      targetObj 需要添加新劫持变量的目标对象
                //      propName 新变量的名称
                //      propValue 新变量的取值
                // this.$set(this.user,"age",23);
                // 上下方法可以等效替换
                Vue.set(this.user,"age",23);

                console.log(this.$data);
                // this.$forceUpdate(); // 强行渲染页面
            },
            setUserPhone(phone){
                this.$set(this.user,"phone",phone)
            },
            updateVueView(){
                this.$forceUpdate();
            },
            deleteStuProp(){
                // this.$delete(targetObj,propName);
                //      targetObj 需要添加新劫持变量的目标对象
                //      propName 需要被删除的变量
                this.$delete(this.stu,"name");
                // 上下方法操作功能相同
                Vue.delete(this.stu,"age")
            }
        },
    });
</script>
</html>